<template>
  <div id="clock">
    <!-- 汉字罗盘时钟 -->
    <ul>
      <!--当前时间线-->
      <div class="now-time" />
      <!--年容器-->
      <div class="year-center">
        <li id="year"></li>
      </div>
      <!--秒容器-->
      <div class="seconds-center">
        <li id="seconds" class="on"></li>
      </div>
      <!--分容器-->
      <div  class="minutes-center">
        <li id="minutes" class="on"></li>
      </div>
      <!--时容器-->
      <div class="hours-center">
        <li id="hours" class="on"></li>
      </div>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      character: ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十" ],
      time: {
        hours: 0, // 0-23
        minutes: 0, // 0-59
        seconds: 0 // 0-59
      },
      time1: null,
      time2: null,
      time3: null,
      time4: null,
    }
  },
  mounted() {
    let nowTime = new Date();
    // document.getElementById("year").innerText = this.transform(nowTime.getFullYear(), "年") + this.transform(nowTime.getMonth() + 1, "月") + this.transform(nowTime.getDate(), "日");
    document.getElementById("year").innerHTML = this.transform(nowTime.getFullYear(), "年") + "<br/>"+ this.transform(nowTime.getMonth() + 1, "月") + this.transform(nowTime.getDate(), "日");
    this.layout("hours");
    this.time1 = setTimeout(this.layout('minutes'), 600);
    this.time2 = setTimeout(this.layout('seconds'), 1200);
    this.time3 = setTimeout(()=>{
      this.time4 = setInterval(this.datetime_init, 1000)
    }, 2000
    );
  },
  methods: {
    // 数字转换汉字的方法（秒/分/时/日/月/年）number 为数字，util 为单位
    transform(number, util) {
      let character = this.character;
      // let text = (util === "年" ? String(number).split("").map(item => character[parseInt(item)]).join("") : number <= 10 ?
      //     character[number] : !(number % 10) ? character[Math.floor(number / 10)] + "十" : number < 20 ? "十" +
      //         character[number % 10] : character[Math.floor(number / 10)] + "十" + character[number % 10]);
      let text = (util === "年" ? String(number).split("").map(item => character[parseInt(item)]).join("") : number <= 10 ?
          character[number] : !(number % 10) ? character[Math.floor(number / 10)] + "十" : number < 20 ? "十" +
              character[number % 10] : character[Math.floor(number / 10)] + "十" + character[number % 10]);

      // 靠右对齐
      // return text + util;

      // 靠左对齐
      // return text + util + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
      // 	"　").join("") : " ");

      // 两端分散对齐
      return text.slice(0, 1) + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
      	"　").join("") : " ") + text.slice(1) + util;

      // 数字靠左对齐、单位靠右对齐
      // return text + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
      //     "　").join("") : " ") + util;
    },
    // 范围数字批量转汉字方法（秒/分/时）通过空列表索引创建范围整数，[0, number]
    range_transform(number, util) {
      return Array.from(Array(number), (v, k) => k).map(item => this.transform(item, util));
    },
    // 布局时间容器
    layout(item) {
      this.range_transform(item === "hours" ? 24 : 60, item === "hours" ? "时" : item === "minutes" ? "分" : " 秒").forEach(
        function(value, index) {
          let temp = document.createElement("div");
          temp.innerText = value;
          temp.className = item;
          document.getElementById(item).appendChild(temp);
        }
      )
      // 初始化延时展开动画
      let index = 0;
      document.getElementById(item).childNodes.forEach(function(temp) {
        setTimeout(function() {
          temp.style.transform = "rotateZ(-" + index * (item === "hours" ? 15 : 6) + "deg)";
          index++;
        }, 500 / (item === "hours" ? 24 : 60) * index / 2);
      })
    },
    // 初始化日期、更新时间
    datetime_init() {
      let nowTime = new Date();
      this.time = {
        hours: nowTime.getHours(), // 0-23
        minutes: nowTime.getMinutes(), // 0-59
        seconds: nowTime.getSeconds() // 0-59
      };
      for (let item in this.time) {
        if (document.getElementById(item).className === "") {
          document.getElementById(item).className = "on";
        }
        document.getElementById(item).style.transform = "rotate(" + this.time[item] * (item === "hours" ? 15 : 6) + "deg)";
        setTimeout(() => {
          if (this.time["seconds"] === 59) {
            document.getElementById("seconds").className = "";
            document.getElementById("seconds").style.transform = "rotate(-6deg)";
            if ( this.time["minutes"] === 59) {
              document.getElementById("minutes").className = "";
              document.getElementById("minutes").style.transform = "rotate(-6deg)";
              if ( this.time["hours"] === 23) {
                document.getElementById("hours").className = "";
                document.getElementById("hours").style.transform = "rotate(-15deg)";
                nowTime = new Date();
                document.getElementById("year").innerText = this.transform(nowTime.getFullYear(), "年") +
                    this.transform(nowTime.getMonth() + 1, "月") + this.transform(nowTime.getDate(), "日");
              }
            }
          }
        }, 500);
      }
    },
    clearPage() {
      clearInterval(this.time4);
      clearTimeout(this.time1);
      clearTimeout(this.time2);
      clearTimeout(this.time3);
      console.log(this.time4)
    }
  },
  beforeDestroy() {
    this.clearPage()
  }
}
</script>
<style lang="less">
#clock {
  color: rgba(0, 0, 0, 0.1);
.hours,
.minutes,
.seconds {
  height: 40px;
  line-height: 40px;
  text-align: right;
  position: absolute;
}
.seconds {
  width: 100%;
}

.minutes {
  width: 100%;
}
.hours {
  width: 100%;
}
}
</style>
<style scoped>
#clock {
  height: 100%;
  width: 100%;
  text-align: left;
}
.year-center, .seconds-center, .minutes-center, .hours-center {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}
.year-center{
  width: 135px;
  height: 135px;
  top: 50%;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  //border: 1px solid;
}
.minutes-center {
  width: 75%;
}
.hours-center {
  width: 50%;
}
/*hr {*/
/*  top: 400px;*/
/*  left: 400px;*/
/*  height: 1px;*/
/*  width: 420px;*/
/*  position: absolute;*/
/*  background-color: #000000;*/
/*}*/
.now-time{
  position: absolute;
  height: 20px;
  top: 48%;
  width: 50%;
  background: #fff;
  left: 50%;
}

ul {
  width: 100%;
  height: 100%;
  list-style: none;
  position: relative;
}

li div,
.on {
  transition: transform linear 0.5s;
}

#hours,
#minutes,
#seconds {
  top: 40%;
  height: 40px;
  font-size: 11px;
  position: absolute;
  transform-origin: 50% 50%;
}



#year {
  margin: auto;
  font-size: 17px;
  font-weight: bold;
  line-height: 34px;
  text-align: center;
  position: absolute;
}

#seconds {
  left: 0;
  //width: 400px;
  width: 100%;
}

#minutes {
  //left: 100px;
  left: 0;
  //width: 300px;
  width: 100%;
}


#hours {
  //left: 200px;
  left: 0;
  //width: 200px;
  width: 100%;
  height: 40px;
}

</style>